<template>
  <div class="contentWeb clear">
    <div class="member_menu">
      <Personleft active="school"/>
    </div>
    <div class="member_right ">
      <div class="personTengt">
        <Memtitle name="在校情况"/>
        <div class="jingyan">
          <div class="mktitle clear">
            <div class="mleft" style="color: #8d8e9c">
              校内荣誉
            </div>
            <div class="mright">
              <i class="el-icon-plus" @click="schoolAdd"></i>
            </div>
          </div>
          <div class="rongyu clear">
            <el-row style="margin: 20px 0;" v-for="(item,index) in schoolHonorList" :key="index">
              <el-col :span="3">{{item.time}}</el-col>
              <el-col :span="12"><b>{{item.honor}}</b></el-col>
              <el-col :span="6" style="color: #8d8e9c">{{item.level}}</el-col>
              <el-col :span="3" style="text-align: right;">
                <i class="el-icon-edit" style="padding: 0 10px; font-size: 20px;text-align: right"
                   @click="editHonor(item.id)"></i>
                <i class="el-icon-delete" style="padding: 0 10px; font-size: 20px;text-align: right"
                   @click="deleteHonor(item.id)"></i>
              </el-col>
            </el-row>
            <div v-if="schoolHonorList.length == 0 " style="text-align: center;">
              <el-button style="background: #20a2b2; margin: 40px auto; border: 0; width: 200px;"
                         type="primary" @click="schoolAdd">添加
              </el-button>
            </div>
          </div>
        </div>
        <div class="jingyan">
          <div class="mktitle clear">
            <div class="mleft" style="color: #8d8e9c">
              校内职务
            </div>
            <div class="mright">
              <i class="el-icon-plus" @click="addposition"></i>
            </div>
          </div>
          <div v-for="(item,index) in schoolPositionList" :key="index">
            <div class="xiaotitle"><span>{{item.startTime}}-{{item.endTime}}</span><b>{{item.title}}</b>
              <div class="workbtn" style="float: right">
                <i class="el-icon-edit" style="padding: 0 10px; font-size: 20px" @click="editPosition(item.id)"></i>
                <i class="el-icon-delete" style="padding: 0 10px; font-size: 20px"
                   @click="deletePosition(item.id)"></i>
              </div>
            </div>
            <div class="misoshu">
              <div class="lefts">工作描述</div>
              <div class="rights">
                <div class="workdescribe">{{item.workDescribe}}</div>
              </div>
            </div>
          </div>
          <div v-if="schoolPositionList.length == 0 " style="text-align: center;">
            <el-button style="background: #20a2b2; margin: 40px auto; border: 0; width: 200px;"
                       type="primary" @click="addposition">添加
            </el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script type="text/babel">
// @ is an alias to /src

import Memtitle from '../../components/memtitle'
import Personleft from '../../components/personleft'
import { getSchoolPositionList, getSchoolHonorList, deleteHonor, deletePosition } from '../../assets/js/domains'

export default {
  name: 'PersonSchool',
  components: {
    Personleft,
    Memtitle
  },
  directives: {},
  data: function () {
    return {
      form: {},
      schoolPositionList: [],
      user_uid: '',
      schoolHonorList: []
    }
  },
  created: function () {
    document.documentElement.scrollTop = document.body.scrollTop = 0
  },
  computed: {},
  mounted: function () {
    this.user_uid = localStorage.getItem('md_user_uid')
    this.getpost()
    this.getHonor()
  },
  methods: {
    onSubmit: function () {
    },
    deletePosition: function (id) {
      const _this = this
      this.$confirm('此操作将永久删除该职务, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function () {
        deletePosition({ id: id }).then(function (res) {
          if (res.code === 200) {
            _this.$message({
              type: 'success',
              message: '删除成功!'
            })
            _this.getpost()
          }
        })
      }).catch(function () {
        _this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    deleteHonor: function (id) {
      const _this = this
      this.$confirm('此操作将永久删除该荣誉, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function () {
        deleteHonor({ id: id }).then(function (res) {
          if (res.code === 200) {
            _this.$message({
              type: 'success',
              message: '删除成功!'
            })
            _this.getHonor()
          }
        })
      }).catch(function () {
        _this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    editHonor: function (id) {
      this.$router.push({
        path: '/schoolAdd',
        query: { id: id }
      })
    },
    editPosition: function (id) {
      this.$router.push({
        path: '/addPosition',
        query: { id: id }
      })
    },
    getpost: function () {
      const _this = this
      getSchoolPositionList({ user_uid: this.user_uid }).then(function (res) {
        if (res.code === 200) {
          _this.schoolPositionList = res.data
        } else {
          _this.$alert(res.msg, '提示', {
            confirmButtonText: '确定',
            callback: function () {
            }
          })
        }
      })
    },
    getHonor: function () {
      const _this = this
      getSchoolHonorList({ user_uid: this.user_uid }).then(function (res) {
        if (res.code === 200) {
          _this.schoolHonorList = res.data
        } else {
          _this.$alert(res.msg, '提示', {
            confirmButtonText: '确定',
            callback: function () {
            }
          })
        }
      })
    },
    schoolAdd: function () {
      this.$router.push({ path: '/schoolAdd' })
    },
    addposition: function () {
      this.$router.push({ path: '/addposition' })
    }
  }
}
</script>
<style lang="less" scoped>
  @import "../../assets/css/member";
</style>
